<!-- @Author ： NWJ
    Watch： 监视数据的变化 
    Vue3 中的 Watch 只能监视以下四种数据
        1.ref 定义的数据
        2.reactive 定义的数据
        3.函数返回值（getter函数）
        4.一个包含上述内容的数组

        给reactive声明的对象直接赋值一个响应式对象 会产生一个新对象 就会失去响应式，必须加上assign
        ref声明的对象就可以直接赋值
        Version ： 1.0 -->

<script setup lang="ts" name="WatchR">
import { ref, watch } from 'vue';

let person = ref({
    name: '张三',
    age: 18
})

function changeName() {
    person.value.name += '~'
}

function changeAge() {
    person.value.age += 1
}

function changePerson() {
    //注意：下面是使用字面量缔造了一个新的对象并赋值给了 person.value，对象直接变了，地址也变
    //但是 reactive创建的对象类型的数据是不能整个赋值的，需要 assign 地址不变
    // Object.assign(person,{name: '里斯'， age: 20}) 这个属于批量修改person的属性，还是一个对象
    person.value = { name: '李四', age: 20 }
}
//监视 watch 的三个参数 ： 被监视对象 监视的回调函数 配置对象（deep ， immediate）
//watch 监视 ref 定义的 对象类型 的数据时 监视的是对象的地址值
//watch 监视 reactive 定义的 对象类型 的数据时 自动开启深度监视且不能关闭
// 想监视对象内部属性的变化需要手动开启深度监视 { deep: true }
watch(person, (newValue, oldValue) => {
    console.log('person变化了', newValue, oldValue);

}, { deep: true })//此时的效果是点击修改name和age，控制台都有输出
</script>


<template>
    <div>
        <h1>2、监视【ref】定义的【对象类型】数据</h1>
        <h2>姓名： {{ person.name }}</h2>
        <h2>年龄： {{ person.age }}</h2>
        <br>
        <button @click="changeName()">修改名字</button>
        <button @click="changeAge()">修改年龄</button>
        <button @click="changePerson()">修改整个人</button>
    </div>
</template>


<style scoped></style>
